<template>
	<div :class="'bg-white p-2'">
		<Row class="m-1">
			<Col class="p-1" span="4">
				<Input class="w-100" clearable v-model="param.clientName"  clearable placeholder="请输入客户名" />
			</Col>
			<Col class="p-1" span="4">
				<Select class="w-100" clearable v-model="param.name" clearable filterable placeholder="请选择门店">
					<Option v-for="param in stores" :value="param.name" :key="param.name">{{ param.name }}</Option>
				</Select>
			</Col>
			<Col class="p-1" span="4">
				<Select class="w-100" v-model = "param.ioFlg" clearable placeholder="请选择押金状态">
					<Option class="w-100" value = false >扣押金</Option>
					<Option class="w-100" value = true>取消扣押</Option>	
				</Select>
			</Col>
			<Col class="p-1" span="4">
				<DatePicker class="w-100" type="datetime" v-model="ct" placeholder="请选择开始创建时间">
				</DatePicker>
			</Col>
			<Col class="p-1" span="4">
				<DatePicker class="w-100" type="datetime" v-model="lastct" placeholder="请选择结束创建时间">
				</DatePicker>
			</Col>
			<Col class="p-1" span="4">
				<Button class="float-right" type="primary" @click="searchs">查询</Button>
			</Col>
		</Row>
		<div class="bg-white">
			<Table border class="m-1" :columns="tableInfo.columnInfo" :data="tableInfo.data"> 
				<template slot-scope="{ row, index }" slot="ioFlg">
					<span v-if="row.ioFlg === false">扣押金</span>
					<span v-else-if="row.ioFlg === true">取消扣押金</span>
				</template>
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" @click="show(row.cutId)">详细</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				
				
				ct: "",
				lastct: "",
				stores:[
					{
						storeId: "1",
						name: "1d"
					},
					{
						storeId: "2",
						name: "2d"
					}
				],
					param:{
						cutId: "",
						clientName: "",
						ct: "",
						amount: "",
						name: "",
						ioFlg: "",
						account: ""
					},
					tableInfo: {
						currentPage: 1,
						total: 0,
						pageSize: 10,
						columnInfo: [
							{
								title: "扣押记录编号",
								key: "cutId",
								width:150
							},
							{
								title: "客户名",
								key: "clientName",
								width:100
							},
							{
								title: "扣押时间",
								key: "ct",
								width:200
							},
							{
								title: "金额",
								slot: "amount",
								width:150
							},
							{
								title: "门店",
								key: "name",
							},
							{
								title: "扣押状态",
								slot: "ioFlg",
								width:100
							},
							{
								title: "操作",
								slot: 'action',
								width: 80
							}
						],
						data: []
					},
				};
		},
		methods: {
			init: function() {
				this.getStores().then(() => {
					this.searchs();
				});
			},
			show: function(cutId) {
				this.$router.push({
					path: "/cutDepositRecord/detail?cutId="+cutId,
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.getCut();
			},
			getCut: function() {
				let ctTime;
				let lastctTime;
				if(this.ct != ""){
					ctTime = this.ct.getTime();
				} 
				if(this.lastct != ""){
					lastctTime = this.lastct.getTime();
				} 
				this.tableInfo.data = [];
				this.http.get({
					url: "/client/deposit-record/cut/list",
					param: {
						param:this.param,
						currentPage: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize,
						ct: ctTime,
						lastct: lastctTime,
						clientName: this.param.clientName,
						name: this.param.name,
						ioFlg: this.param.ioFlg,
						account:this.param.account,	
					}
				}).then(data => {
					console.log(data);
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			getStores: function() {
				return this.http.get({
					url: "/store/store/info",
					param: {
					}
				}).then(data => {
					this.stores = data;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.getCut();
			},
		},
		created(){
			this.init();
		},
	}
</script>
<style>
</style>
